import React, { useState } from 'react';
import axios from 'axios';
import { toast } from 'react-toastify';
import { useNavigate } from 'react-router-dom';
import './Users.css';

const AdminAddUser = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    fullName: '',
    email: '',
    role: 'employee'
  });
  const [submitting, setSubmitting] = useState(false);
  const navigate = useNavigate();

  const { username, password, fullName, email, role } = formData;

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // 表单验证
    if (!username || !password) {
      return toast.error('用户名和密码为必填项');
    }

    if (password.length < 6) {
      return toast.error('密码长度不能少于6位');
    }

    setSubmitting(true);
    try {
      await axios.post('/auth/register', formData);
      toast.success('用户添加成功');
      navigate('/users');
    } catch (err) {
      console.error('添加用户失败', err);
      toast.error(err.response?.data?.message || '添加用户失败，请稍后重试');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="user-add-container">
      <h1 className="page-title">添加新用户</h1>

      <form onSubmit={handleSubmit} className="user-form">
        <div className="form-group">
          <label htmlFor="username">用户名</label>
          <input
            type="text"
            id="username"
            name="username"
            value={username}
            onChange={handleChange}
            required
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label htmlFor="password">密码</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={handleChange}
            required
            minLength="6"
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label htmlFor="fullName">姓名</label>
          <input
            type="text"
            id="fullName"
            name="fullName"
            value={fullName}
            onChange={handleChange}
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label htmlFor="email">邮箱</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={handleChange}
            className="form-control"
          />
        </div>

        <div className="form-group">
          <label htmlFor="role">角色</label>
          <select
            id="role"
            name="role"
            value={role}
            onChange={handleChange}
            className="form-control"
          >
            <option value="payment_manager">清算经理</option>
            <option value="employee">员工</option>
          </select>
        </div>

        <div className="form-actions">
          <button
            type="submit"
            className="btn btn-primary"
            disabled={submitting}
          >
            {submitting ? '添加中...' : '添加用户'}
          </button>
          <button
            type="button"
            className="btn btn-secondary"
            onClick={() => navigate('/users')}
          >
            取消
          </button>
        </div>
      </form>
    </div>
  );
};

export default AdminAddUser;